<template>
  <el-menu :router="true" mode="vertical" text-color="#000" :default-active="activePath">
    <template v-for="(item, index) in menuList">
      <!-- 一级菜单 -->
      <el-menu-item v-if="!item.children || item.children.length === 0" :key="item.id" :index="item.path"
        @click="handleItemClick(item)">
        <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-menu"></i>
          <!-- 文本 -->
          <span style="font-family: 微软雅黑,serif">{{ item.text }}</span>
        </template>
      </el-menu-item>
      <!-- 多级菜单 -->
      <el-submenu v-else :index="item.name">
        <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-menu"></i>
          <!-- 文本 -->
          <span style="font-family: 微软雅黑,serif">{{ item.text }}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.path"
          @click="handleItemClick(subItem)">
          <template slot="title">
            <!-- 图标 -->
            <i class="el-icon-menu"></i>
            <!-- 文本 -->
            <span style="font-family: 微软雅黑,serif">{{ subItem.text }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import {$SysMenuApi} from "@/network/menu/SysMenuApi";

export default {
  name: "SideMenu",
  data() {
    return {
      activePath: '',
      menuList: [],
    }
  },

  created() {
    this.getSideMenuList();
    this.activePath = this.$store.getters["NavBar/getActivePath"];
  },

  methods: {
    handleItemClick(item) {
      this.$store.commit("NavBar/setActivePath", item.path);
    },

    async getSideMenuList() {
      let path = this.$route.path.split("/")[1];
      let res = await $SysMenuApi.getMenuData();
      this.menuList = res.data[path];
    },
  },


}
</script>

<style></style>